<template>
    <div>
        <van-nav-bar title="停车场" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="stopCar">
            <div class="address">
                当前位置: {{address.province}} {{address.city}}
            </div>
            <div class="addressList">
                <div class="listOne" v-for="aitem in addressList" :key="aitem.id" @click="gotoDetail(aitem)">

                    <div class="iconfont icon-weizhi">
                        <img :src="'http://218.7.112.123:10001/'+aitem.imgUrl" alt="">
                    </div>
                    <div class="addressText">
                        <div class="parkName">{{aitem.parkName}}
                            <span class="open">对外开放</span>
                        </div>
                        <div class="detailed">{{aitem.address}}</div>
                        <div class="vacancy">空位: {{aitem.vacancy}} 封顶价格: {{aitem.priceCaps}}</div>
                    </div>
                    <div class="distance">
                        距离 : {{aitem.distance}}km
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import nav from "@/mixin/nav";
import { stopAddressList } from "@/service/stop/stopService";
import { mapState } from "vuex";
export default {
    mixins: [nav],
    data() {
        return {
            addressList: [],
        }
    },
    computed: {
        ...mapState(["address"])
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        gotoDetail(item) {
            this.$router.push("/stop/detail/" + item.id);
        }
    },
    async created() {
        let { data: list } = await stopAddressList({});
        console.log(list);
        this.addressList = list.rows;
    }
}

</script>
<style scoped lang="scss">
.stopCar {
    background-color: #fff;
    margin: 15px;
    border-radius: 10px;
    padding: 10px;

    .addressList {
        height: 100%;


        .listOne {
            display: flex;
            align-items: center;
            padding: 5px;
            height: 80px;
            border-bottom: 1px solid #EDEDED;
            position: relative;


            .addressText {
                margin-left: 10px;
                position: relative;

                .parkName {
                    width: 200px;
                    height: 30px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-weight: 600;


                    .open {
                        position: absolute;
                        right: -60px;
                        top: 0;
                        padding: 5px;
                        background-color: rgb(252, 94, 94);
                        color: #fff;
                        font-size: 10px;
                        margin-left: 10px;
                        border-radius: 15px;
                    }
                }

                .detailed {
                    font-size: 12px;
                }

                .vacancy {
                    margin-top: 10px;
                    color: rgb(2, 161, 2);
                    font-size: 12px;
                }
            }

            .distance {
                position: absolute;

                bottom: 10px;
                right: 10px;
                font-size: 12px;

            }
        }
    }
}
</style>